<html xmlns:th="http://www.thymeleaf.org" lang="en" >
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
  <link rel="stylesheet" th:href="@{'/css/bootstrap.min.css'}">
  <link rel="stylesheet" th:href="@{'/css/buttonStyle.css'}">
  <link rel="stylesheet" th:href="@{'/css/parcelPickUp.css'}">
    <title>Parcel Pickup</title>
  </head>
  
  <body style="background-color: #424564">

    <!-- 导航栏 -->
    <div class="container-fluid" style="background-color: rgb(245,245,245);">
      <div class="container">
        <nav class="navbar navbar-expand-lg">
          <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
              <div class="container">
                <li class="nav-item">
                  <button type="button" id="parcelQuery"
                          class="btn btn-primary " style="width: 150px; height:45px; font-size: large;">
                    Search
                  </button>
                </li>
              </div>

              <div class="container">
                <li class="nav-item">
                  <button type="button" id="myParcel"
                          class="btn btn-primary" style="width: 130px; height: 45px; font-size: large;">My Parcels</button>
                </li>
              </div>

              <div class="container">
                <li class="nav-item">
                  <button type="button" class="btn btn-primary active" id="parcelPickUp"
                          style="width: 150px; height: 45px; font-size: large;">Parcel Pickups</button>
                </li>
              </div>

              <div class="container">
                <li class="nav-item">
                  <button type="button" class="btn btn-primary" id='parcelPost'
                          style="width: 150px; height: 45px; font-size: large;">Mailing parcels</button>
                </li>
              </div>
            </ul>
            <form class="form-inline my-2 my-lg-0" th:if="${session['userId'] != null}">
              <div class="btn-group dropleft">
                <button type="button" class="btn btn-info dropdown-toggle"
                        style="width: 150px; height: 45px;" id="logout"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Log Out
                </button>
              </div>
            </form>
          </div>
        </nav>
      </div>
    </div>
    <!-- Logo栏 -->
    <div class="container " style="padding: 5% 0% 5% 19.5%" >
      <img th:src="@{'/images/logo_white.png'}" style="width:65%" class="img-responsive center-block" >
    </div>
  
    <!-- 我的包裹记录导航栏 -->
    <div class="container bg-white" style="margin-bottom: 3%; margin-top: 3%; border-radius: 15px; padding-top:10px;">

      <div id="myTabContent" class="tab-content" style="margin-top: 10px;">
        <div class="tab-pane fade active show">
          <h3 style="margin-bottom: 20px">
            All parcels ready to pick up:
          </h3>

          <div th:if="${resultNumber == 0}" class="text-warning" style="padding-bottom: 30px; margin-bottom: 10%;">
            <div class="alert alert-danger">
              <strong>Error:</strong> No result has been founded!
            </div>
          </div>

          <!-- 表格 -->
          <table th:if="${resultNumber != 0}" class="table table-hover">
            <thead>
            <tr>
              <th scope="col" style="vertical-align: middle;">Tracking Number</th>
              <th scope="col" style="vertical-align: middle; text-align: center">Time</th>
              <th scope="col" style="vertical-align: middle;">Current State</th>
              <th scope="col" style="vertical-align: middle;">Operator</th>
              <th scope="col" style="vertical-align: middle;">Owner</th>
              <th scope="col" style="vertical-align: middle;">Consignee</th>
            </tr>
            </thead>
            <tbody>
            <tr  th:each="parcel:${allParcel}">
              <td th:text="${parcel.getTrackingNumber()}"></td>
              <td style="text-align: center;" th:text="${#dates.format(parcel.getCurrentStateTime(),'yyyy-MM-dd HH:mm:ss')}">12 December 2020</td>
              <td th:text="${parcel.getCurrentStateByText()}"></td>
              <td th:text="${parcel.getOperatorName()}"></td>
              <td th:text="${parcel.getUserName()}"></td>
              <td style="text-align: center">
                <div  class="container" th:if="${parcel.getCurrentStateByNumber() le 0}">
                  <button type="button" class="btn btn-info"
                          data-toggle="modal" data-target="#Consignee" id="consigneeButton"
                  th:onclick="'setParcelIdToInput('+ ${parcel.getParcelId()} + ');'">Request for consignee pickup</button>
                </div>

                <div class="container" th:if="${((parcel.getCurrentStateByNumber() eq 3 or parcel.getCurrentStateByNumber() eq 4) and
                 userName.getUserId() eq parcel.getUserId()) }">
                  <a class="btn btn-warning" th:href="@{'/cancelOrRejectApply?parcelId=' + ${parcel.getParcelId()} }">Cancel</a>
                </div>

                <div class="container" th:if="${(parcel.getCurrentStateByNumber() eq 3 and
                 userName.getUserId() ne parcel.getUserId()) }">
                  <a class="btn btn-success" th:href="@{'/acceptApply?parcelId=' + ${parcel.getParcelId()} }">Accept</a>
                  <a class="btn btn-danger" th:href="@{'/cancelOrRejectApply?parcelId=' + ${parcel.getParcelId()} }">Reject</a>
                </div>

                <div class="container" th:if="${parcel.getCurrentStateByNumber() eq 4 and
                 userName.getUserId() ne parcel.getUserId()}">
                  <a class="btn btn-danger" th:href="@{'/cancelOrRejectApply?parcelId=' + ${parcel.getParcelId()} }">Reject</a>
                </div>

              </td>
            </tr>
            </tbody>
          </table>
          <!-- 分页 -->
          <div th:if="${resultNumber != 0}" class="container d-flex justify-content-center">
            <div>
              <ul class="pagination">
                <li class="page-item" id="start">
                  <a class="page-link" th:href="@{'/parcelPickUp?get=' + ${get} +'&page=' + ${currentPage - 1 }}">&laquo;</a>
                </li>
                <li class="page-item" th:id="'all-page-' + ${i}" th:each="i:${#numbers.sequence(1,maxPage)}">
                  <a class="page-link" th:href="@{'/parcelPickUp?get=' + ${get} +'&page=' + ${i}}" th:text="${i}">1</a>
                </li>
                <li class="page-item" id="end">
                  <a class="page-link" th:href="@{'/parcelPickUp?get=' + ${get} +'&page=' + ${currentPage + 1 }}">&raquo;</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="Consignee" tabindex="-1" role="dialog" aria-labelledby="queryResultLabel"
           aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content" >
            <div class="modal-header">
              <h3 class="modal-title">Apply For Consignee</h3>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <form method="post" th:action="@{'/applyConsignee'}">
            <div class="modal-body">
              <div class="form-group">
              <input class="form-control form-control-lg is-invalid" type="text" placeholder="Enter Consignee Name" id="consigneeName"
                     style="margin-bottom: 20px;" >
                <div class="invalid-feedback">No result has been found!</div>
              </div>
              <select name="consigneeId" class="form-control form-control-l" id="consigneeId">
              </select>
              <input type="hidden" id="parcelId" name="parcelId">
              <div id="resultText"></div>
            </div>
            <div class="modal-footer">
              <div id="submitText" class="text-danger">Please select a consignee</div>
              <button type="submit" class="btn btn-info"  id="consigneeOK" >Submit</button>
              <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  
  
    <footer style="background-color: rgb(51, 51, 51); padding-bottom: 50px; padding-top: 10px;">
      <div class="container text-white text-center">
        <h4>XMUM STUDENT WORKS</h4>
      </div>
    </footer>
  
    <!-- Javascript -->
    <script th:src="@{'/js/jquery-3.5.1.min.js'}"></script>
    <script th:src="@{'/js/bootstrap.bundle.min.js'}"></script>
    <script th:inline="javascript">
      $().ready(function() {
        //Javascript

        var currentPage = [[${currentPage}]];
        console.log(currentPage);
        var maxPage = [[${maxPage}]];
        console.log(maxPage)
        if (maxPage === currentPage) {
          $("#end").addClass('disabled');
        }
        if (currentPage === 1) {
          $('#start').addClass('disabled');
        }
        $("#all-page-" + currentPage).addClass('active');
      })
    </script>
    <script th:inline="javascript">

      function setParcelIdToInput(parcelIdFromUser){
        $('#parcelId').val(parcelIdFromUser);
      }

      $().ready(function (){

        //提示文字隐藏
        $('#consigneeId').hide();
        $('#consigneeId').hide();
        $('#submitText').hide();

        //搜索名字
        $('#consigneeName').blur(function (){
          $('#consigneeId').empty()
          if ($('#consigneeName').val()==""){
            $('#consigneeName').addClass('is-invalid');
            $('#consigneeId').hide();
            return false;
          }
          //ajax 获得名字检索结果
          $.ajax({
            //请求方式
            type : "GET",
            //请求地址
            url : [[@{'/userInfo?fullName='}]] + $('#consigneeName').val(),

            //请求成功
            success : function(result) {
              var html="";
              if (result.length > 0 ) {
                console.log(result.length)
                result.forEach(function (detail){
                  if([[${userName.getFullName()}]] !== detail['fullName']) {
                    html += "<option value=\""+ detail['userId'] + "\">" + detail['fullName'] + ' (ID: ' + detail['userId'] + " )</option>";
                  }
                })
              }
              if(html ===""){
                $('#consigneeName').addClass('is-invalid');
                $('#consigneeId').hide();
              } else {
                $('#consigneeName').removeClass('is-invalid');
                $('#consigneeId').show();
              }
              $('#consigneeId').append(html);
              console.log(result)
            },
            //请求失败，包含具体的错误信息
            error : function(e){
              console.log(e.status);
              console.log(e.responseText);
            }
          });
        })

        //表单提交
        $("form").submit(function(e){
          if($('#consigneeId').val() === null) {
            $('#submitText').show()
            setTimeout(function(){
              $('#submitText').hide()
            },2000);
            return false;
          }
        });
        //页面跳转
        $('#myParcel').click(function () {
          window.location.href = [[@{'/myParcel'}]];
        })
        $('#parcelQuery').click(function (){
          window.location.href = [[@{'/public/parcelQuery'}]];
        })
        $('#parcelPickUp').click(function(){
          window.location.href = [[@{'/parcelPickUp'}]];
        });
        $('#logout').click(function () {
          window.location.href = [[@{'/public/logout'}]]
        })
        $('#parcelPost').click(function () {
          window.location.href = [[@{'/comingSoon'}]];
        })

      })
    </script>
  </body>
  
  </html>